import 'react'
import { Carousel, Image } from 'antd'


/**轮播图 */
const Banner = () => {
    const data: { bannerImg: string, title: string, text: string, color: string }[] = [
        {
            title: '短线数据大师',
            bannerImg: '/YYAI_Banner_5.jpg',
            text: '智能数据，引领未来',
            color: '#333'
        },
        // {
        //     title: '数字人形象',
        //     bannerImg: '/YYAI_Banner_4.jpg',
        //     text: '全新一代AI算法',
        //     color: '#fff'
        // }
    ]
    return (
        <div>
            <Carousel autoplay arrows >
                {data.map((item) => {
                    return (
                        <div className={`relative`}>
                            <img src={item.bannerImg} className='w-full h-[500px] object-cover'></img>
                            {/* <Image src={item.bannerImg} preview={false} className='w-full'/> */}
                            <div className='absolute z-[999] inset-0 flex justify-center items-center'>
                                <div className={`h-full w-[1000px] flex flex-col justify-center gap-[30px]`} style={{ color: `${item.color}` }}>
                                    <div className="title text-[52px] front-bold">{item.title}</div>
                                    <div className="text text-[20px]">{item.text}</div>
                                </div>
                            </div>
                        </div>
                    )
                })}
            </Carousel>
        </div>
    )
}

export default Banner